<template>
  <view class="page_box">
    <view class="content_box">
      <HomePg
        @tabChange="tabChange"
        ref="HomePg"
        v-show="PageCur == 1"
      ></HomePg>
      <SecondPg
        @tabChange="tabChange"
        ref="SecondPg"
        v-show="PageCur == 2"
      ></SecondPg>
      <ThirdPg
        @tabChange="tabChange"
        ref="ThirdPg"
        v-show="PageCur == 3"
      ></ThirdPg>
      <UserPg
        @tabChange="tabChange"
        ref="UserPg"
        v-show="PageCur == 4"
      ></UserPg>
    </view>
    <view
      class="toolbar-height"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
    ></view>
    <view
      class="tabbarbox"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
    >
      <view class="cu-bar box_shadow tabbar bg-white">
        <view
          class="action"
          :class="PageCur == 1 ? 'text-black b' : 'text-gray'"
          @click="NavClick"
          data-cur="1"
        >
          <view class="cuIcon-cu-image">
            <image src="@/static/img/home_c.png" v-if="PageCur == 1"></image>
            <image src="@/static/img/home.png" v-else></image> </view
          >首页
        </view>
        <view
          class="action"
          :class="PageCur == 2 ? 'text-black b' : 'text-gray'"
          @click="NavClick"
          data-cur="2"
        >
          <view class="cuIcon-cu-image">
            <image src="@/static/img/store_c.png" v-if="PageCur == 2"></image>
            <image src="@/static/img/store.png" v-else></image>
          </view>
          店铺
        </view>
        <view class="action add-action">
          <button class="cu-btn cuIcon-cu-image1" @tap="centerEvt">
            <image src="@/static/img/mlogo.png"></image>
          </button>
        </view>
        <view
          class="action"
          :class="PageCur == 3 ? 'text-black b' : 'text-gray'"
          @click="NavClick"
          data-cur="3"
        >
          <view class="cuIcon-cu-image">
            <image src="@/static/img/zizhi_c.png" v-if="PageCur == 3"></image>
            <image src="@/static/img/zizhi.png" v-else></image>
          </view>
          资质
        </view>
        <view
          class="action"
          :class="PageCur == 4 ? 'text-black b' : 'text-gray'"
          @click="NavClick"
          data-cur="4"
        >
          <view class="cuIcon-cu-image">
            <image src="@/static/img/me_c.png" v-if="PageCur == 4"></image>
            <image src="@/static/img/me.png" v-else></image>
          </view>
          我的
        </view>
      </view>
    </view>
    <gorenzheng ref="maRef" @gorenpage="gorenpage"></gorenzheng>
  </view>
</template>

<script>
/*自定义询问导航。步骤：
	1、自页放在pages.json第一个
	2、pages.json:globalStyle->navigationStyle:custom,去掉tabBar
	3、需要显示在主页的页页面必须使用自定义导航。onload和pageShow无效
		有导航时，onload只会执行一次，pageShow执行多次。
		v-if自定导航时mounted每点击都会执行。 v-show mounted只执行一次
		所以： 新增加page_load代onload，page_show代替pageShow
		主页面的style会冲突，用大类包住
		
		这些页的下拉、触底效果等失效
	4、其它页面跟以往一样
	*/
import HomePg from "@/pages/index/index.vue";
import SecondPg from "@/pages/store/index.vue";
import ThirdPg from "@/pages/zizhi/index.vue";
import UserPg from "@/pages/me/index";
import { membersinfo } from "@/utils/api";
import gorenzheng from "@/components/gorenzheng.vue";
export default {
  components: {
    HomePg,
    SecondPg,
    ThirdPg,
    UserPg,
	gorenzheng
  },
  data() {
    return {
      PageCur: 1,
      rn: ["", "HomePg", "SecondPg", "ThirdPg", "UserPg"],
      isPageLoad: [false, false, false, false],
      isLoad: false,
    };
  },
  onLoad: function (option) {
    if (option.index) {
      this.NavChange(Number(option.index))
    }
    this._doOnLoad();
  },
  onShow: function () {
    let page = this.$refs[this.rn[this.PageCur]];
    !page.page_show || page.page_show();
  },
  methods: {
    NavClick: function (e) {
      let tcu = Number(e.currentTarget.dataset.cur || 1);
      this.NavChange(tcu);
    },
    NavChange: function (tcu) {
      if (this.PageCur == tcu) {
        return;
      }
      this.PageCur = tcu;
      //   新加获取用户新的信息
      this.getnewinfo();
      // this.$refs.commentTabbat.getSetting(temp)
      this.$nextTick(() => {
        this._doOnLoad();
      });
    },
    gorenpage() {
      uni.navigateTo({
        url: "/pages/me/authentication",
      });
    },
    getnewinfo() {
      membersinfo().then((meinfo) => {
        if (meinfo) {
          uni.setStorageSync("userinfo", JSON.stringify(meinfo.data));
          uni.$emit("changeinfo", JSON.stringify(meinfo.data));
        }
      });
    },
    /*onLoad*/
    _doOnLoad: function () {
      switch (this.PageCur) {
        case 1:
        case 2:
        case 3:
        case 4:
          let page = this.$refs[this.rn[this.PageCur]];
          /*onload只让执行一次*/
          if (!this.isPageLoad[this.PageCur]) {
            !page.page_load || page.page_load();
            this.isPageLoad[this.PageCur] = true;
          }
          !page.page_show || page.page_show();
          break;
        default:
          break;
      }
    },
    tabChange: function (index) {
      this.NavChange(index);
    },
    showpop() {
      this.$refs.maRef.maopen();
    },
    centerEvt: function () {
     // 改为在里面判断了
     uni.navigateTo({ url: "/pages/sale/selling" });
      // let userinfo = uni.getStorageSync("userinfo")
      //   ? JSON.parse(uni.getStorageSync("userinfo"))
      //   : {};
      // if (userinfo.id) {
      //   if (userinfo.memberCertificate&&userinfo.memberCertificate.auditStatus==0||userinfo.memberCertificate&&userinfo.memberCertificate.auditStatus==1) {
      //     uni.navigateTo({ url: "/pages/sale/selling" });
      //   } else {
      //     this.showpop();
      //   }
      // } else {
      //   uni.navigateTo({
      //     url: "/pages/login/index",
      //   });
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.cu-bar {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  align-items: center;
  min-height: 100upx;
  justify-content: space-between;
  background-color: #ffffff;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  max-width: 100%;
}

.cu-bar .action.border-title {
  position: relative;
  top: -10upx;
}

.cu-bar .action.border-title text[class*="bg-"]:last-child {
  position: absolute;
  bottom: -0.5rem;
  min-width: 2rem;
  height: 6upx;
  left: 0;
}

.cu-bar .action.sub-title {
  position: relative;
  top: -0.2rem;
}

.cu-bar .action.sub-title text {
  position: relative;
  z-index: 1;
}

.cu-bar .action.sub-title text[class*="bg-"]:last-child {
  position: absolute;
  display: inline-block;
  bottom: -0.2rem;
  border-radius: 6upx;
  width: 100%;
  height: 0.6rem;
  left: 0.6rem;
  opacity: 0.3;
  z-index: 0;
}
.cu-bar .action.sub-title text[class*="text-"]:last-child {
  position: absolute;
  display: inline-block;
  bottom: -0.7rem;
  left: 0.5rem;
  opacity: 0.2;
  z-index: 0;
  text-align: right;
  font-weight: 900;
  font-size: 36upx;
}

.cu-bar.justify-center .action.border-title text:last-child,
.cu-bar.justify-center .action.sub-title text:last-child {
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.cu-bar .action:first-child {
  margin-left: 30upx;
  font-size: 30upx;
}

.cu-bar .action text.text-cut {
  text-align: left;
  width: 100%;
}

.cu-bar .cu-avatar:first-child {
  margin-left: 20upx;
}

.cu-bar .action:first-child > text[class*="cuIcon-"] {
  margin-left: -0.3em;
  margin-right: 0.3em;
}

.cu-bar .action:last-child {
  margin-right: 30upx;
}

.cu-bar .action > text[class*="cuIcon-"],
.cu-bar .action > view[class*="cuIcon-"] {
  font-size: 36upx;
}

.cu-bar .action > text[class*="cuIcon-"] + text[class*="cuIcon-"] {
  margin-left: 0.5em;
}

.cu-bar .content {
  position: absolute;
  text-align: center;
  width: calc(100% - 340upx);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 60upx;
  font-size: 32upx;
  line-height: 60upx;
  cursor: none;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.cu-bar.ios .content {
  bottom: 7px;
  height: 30px;
  font-size: 32upx;
  line-height: 30px;
}

.cu-bar.btn-group {
  justify-content: space-around;
}

.cu-bar.btn-group button {
  padding: 20upx 32upx;
}

.cu-bar.btn-group button {
  flex: 1;
  margin: 0 20upx;
  max-width: 50%;
}

.cu-bar .search-form {
  background-color: #f5f5f5;
  line-height: 64upx;
  height: 64upx;
  font-size: 24upx;
  color: #333333;
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0 30upx;
}

.cu-bar .search-form + .action {
  margin-right: 30upx;
}

.cu-bar .search-form input {
  flex: 1;
  padding-right: 30upx;
  height: 64upx;
  line-height: 64upx;
  font-size: 26upx;
  background-color: transparent;
}

.cu-bar .search-form [class*="cuIcon-"] {
  margin: 0 0.5em 0 0.8em;
}

.cu-bar .search-form [class*="cuIcon-"]::before {
  top: 0upx;
}

.cu-bar.fixed,
.nav.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1024;
  box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}

.cu-bar.foot {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
}

.cu-bar.tabbar {
  padding: 0;
  height: calc(100upx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

.cu-tabbar-height {
  min-height: 100upx;
  height: calc(100upx + env(safe-area-inset-bottom) / 2);
}

.cu-bar.tabbar.shadow {
  box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
}

.cu-bar.tabbar .action {
  font-size: 22upx;
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0;
  display: block;
  height: auto;
  line-height: 1;
  margin: 0;
  background-color: inherit;
  overflow: initial;
}

.cu-bar.tabbar.shop .action {
  width: 140upx;
  flex: initial;
}

.cu-bar.tabbar .action.add-action {
  position: relative;
  z-index: 2;
  padding-top: 50upx;
}

.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
  position: absolute;
  width: 70upx;
  z-index: 2;
  height: 70upx;
  border-radius: 50%;
  line-height: 70upx;
  font-size: 50upx;
  top: -35upx;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
}

.cu-bar.tabbar .action.add-action::after {
  content: "";
  position: absolute;
  width: 100upx;
  height: 100upx;
  top: -50upx;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
  border-radius: 50upx;
  background-color: inherit;
  z-index: 0;
}

.cu-bar.tabbar .action.add-action::before {
  content: "";
  position: absolute;
  width: 100upx;
  height: 30upx;
  bottom: 30upx;
  left: 0;
  right: 0;
  margin: auto;
  background-color: inherit;
  z-index: 1;
}

.cu-bar.tabbar .btn-group {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 10upx;
}

.cu-bar.tabbar button.action::after {
  border: 0;
}

.cu-bar.tabbar .action [class*="cuIcon-"] {
  width: 100upx;
  position: relative;
  display: block;
  height: auto;
  margin: 0 auto 10upx;
  text-align: center;
  font-size: 40upx;
}

.cu-bar.tabbar .action .cuIcon-cu-image {
  margin: 0 auto;
}

.cu-bar.tabbar .action .cuIcon-cu-image image {
  width: 50upx;
  height: 50upx;
  display: inline-block;
}

.cu-bar.tabbar .submit {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  flex: 2;
  align-self: stretch;
}

.cu-bar.tabbar .submit:last-child {
  flex: 2.6;
}

.cu-bar.tabbar .submit + .submit {
  flex: 2;
}

.cu-bar.tabbar.border .action::before {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  border-right: 1upx solid rgba(0, 0, 0, 0.1);
  z-index: 3;
}

.cu-bar.tabbar.border .action:last-child:before {
  display: none;
}

.cu-bar.input {
  padding-right: 20upx;
  background-color: #ffffff;
}

.cu-bar.input input {
  overflow: initial;
  line-height: 64upx;
  height: 64upx;
  min-height: 64upx;
  flex: 1;
  font-size: 30upx;
  margin: 0 20upx;
}

.cu-bar.input .action {
  margin-left: 20upx;
}

.cu-bar.input .action [class*="cuIcon-"] {
  font-size: 48upx;
}

.cu-bar.input input + .action {
  margin-right: 20upx;
  margin-left: 0upx;
}

.cu-bar.input .action:first-child [class*="cuIcon-"] {
  margin-left: 0upx;
}

.heightmg {
  height: calc(100upx + env(safe-area-inset-bottom) / 2);
}

.cu-bar.tabbar .action .cuIcon-cu-image {
  margin: 0 auto 8upx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cu-bar.tabbar .action .cuIcon-cu-image image {
  width: 42upx;
  height: 42upx;
}

/* .cu-bar.tabbar .action.add-action .cuIcon-cu-image1,.cu-bar.tabbar .action.add-action button {
	background-color: #fff;
	position: absolute;top:-80upx;
	padding: 0;
	width: 136upx;height: 136upx;
	z-index: 3;
}
.cu-bar.tabbar .action.add-action .cuIcon-cu-image1 image {
	width: 136upx;height: 136upx;
} */

/* .cu-bar.tabbar .action.add-action .cuIcon-cu-image1,
.cu-bar.tabbar .action.add-action button {
  background-color: #fff;
  position: absolute;
  top: -50upx;
  padding: 0;
  width: 72rpx;
  height:73rpx;
  z-index: 3;
} */
.cu-bar.tabbar .action.add-action .cuIcon-cu-image1 image {
  width: 72rpx;
  height: 73rpx;
  position: relative;
  /* top: -10upx; */
}

.box_shadow {
  border-radius: 20upx 20upx 0 0;
  box-shadow: 0 -1px 8px #ddd;
}
</style>
